{% block sw_data_grid %}
<div
    class="sw-data-grid"
    :class="classes"
>

    {% block sw_data_grid_wrapper %}
    <div
        ref="wrapper"
        class="sw-data-grid__wrapper"
    >
        {% block sw_data_grid_bulk %}
        <div
            v-if="selectionCount > 0"
            class="sw-data-grid__bulk"
        >
            {% block sw_data_grid_bulk_selected_count %}
            <span class="sw-data-grid__bulk-selected sw-data-grid__bulk-selected-label">{{ $tc('global.sw-data-grid.labelSelectionCount') }}</span>
            <span class="sw-data-grid__bulk-selected sw-data-grid__bulk-selected-count">{{ selectionCount }}</span>
            <span
                v-if="reachMaximumSelectionExceed"
                class="sw-data-grid__bulk-selected sw-data-grid__bulk-max-selection"
            >
                {{ $tc('global.sw-data-grid.maximumSelectionExceed') }}
            </span>
            {% endblock %}

            {% block sw_data_grid_bulk_selected_actions %}
            <span class="sw-data-grid__bulk-selected bulk-link">
                <a
                    v-if="hasInvisibleSelection"
                    class="link link-warning bulk-deselect-all"
                    role="button"
                    tabindex="0"
                    @click="resetSelection"
                    @keydown.enter="resetSelection"
                >
                    {{ $tc('global.sw-data-grid.labelDeSelectAll') }}
                </a>
                <slot name="bulk">
                {% block sw_data_grid_bulk_selected_actions_content %}{% endblock %}
                </slot>
            </span>
            {% endblock %}
        </div>
        {% endblock %}

        {% block sw_data_grid_bulk_modals %}
        <slot
            name="bulk-modals"
            v-bind="{ selection }"
        >
            {% block sw_data_grid_slot_bulk_modals %}{% endblock %}
        </slot>
        {% endblock %}

        {% block sw_data_grid_table %}
        <table
            ref="table"
            class="sw-data-grid__table"
        >

            {% block sw_data_grid_header %}
            <thead
                v-if="showHeader"
                class="sw-data-grid__header"
            >

                {% block sw_data_grid_header_row %}
                <tr class="sw-data-grid__row">

                    {% block sw_data_grid_header_cell_selection %}
                    <th
                        v-if="showSelection"
                        class="sw-data-grid__cell sw-data-grid__cell--header sw-data-grid__cell--selection"
                    >
                        {% block sw_data_grid_header_cell_selection_content %}
                        <div class="sw-data-grid__cell-content">
                            {% block sw_data_grid_select_all_checkbox %}
                            <mt-checkbox
                                v-if="records && records.length > 0"
                                :aria-label="$tc(allSelectedChecked ? 'global.sw-data-grid.labelDeSelectAll' : 'global.sw-data-grid.labelSelectAll')"
                                :disabled="isSelectAllDisabled"
                                class="sw-data-grid__select-all"
                                :checked="allSelectedChecked"
                                @update:checked="selectAll"
                            />
                            {% endblock %}
                        </div>
                        {% endblock %}
                    </th>
                    {% endblock %}

                    {% block sw_data_grid_header_columns %}
                    <th
                        v-for="(column, columnIndex) in currentColumns"
                        v-show="column.visible"
                        :key="`${column.property}-${columnIndex}`"
                        ref="column"
                        class="sw-data-grid__cell sw-data-grid__cell--header sw-data-grid__cell--property"
                        :class="getHeaderCellClasses(column, columnIndex)"
                        :style="{ width: column.width, minWidth: column.width }"
                        @click="onClickHeaderCell($event, column)"
                    >

                        {% block sw_data_grid_header_columns_content %}
                        <div class="sw-data-grid__cell-content">

                            <slot
                                :name="`column-label-${column.property}`"
                                v-bind="{ column, columnIndex }"
                            >

                                {% block sw_data_grid_header_columns_icon %}
                                <mt-icon
                                    v-if="column.iconLabel && column.iconTooltip"
                                    v-tooltip="column.iconTooltip"
                                    :name="column.iconLabel"
                                >
                                    {{ $te((column.label ?? 'undefined')) ? $tc(column.label) : column.label }}
                                </mt-icon>

                                <mt-icon
                                    v-else-if="column.iconLabel"
                                    :name="column.iconLabel"
                                >
                                    {{ $te((column.label ?? 'undefined')) ? $tc(column.label) : column.label }}
                                </mt-icon>
                                {% endblock %}

                                {% block sw_data_grid_header_columns_label %}
                                <template v-else>
                                    {{ $te((column.label ?? 'undefined')) ? $tc(column.label) : column.label }}
                                </template>
                                {% endblock %}
                            </slot>

                            {% block sw_data_grid_column_actions %}
                            <sw-context-button
                                v-if="allowColumnEdit && !isInlineEditActive"
                                class="sw-data-grid__action-edit-column"
                                aria-label="global.sw-data-grid.columnsActions"
                            >
                                {% block sw_data_grid_column_actions_hide %}
                                <sw-context-menu-item
                                    :disabled="column.primary"
                                    variant="danger"
                                    @click="hideColumn(columnIndex)"
                                >
                                    {{ $tc('global.sw-data-grid.labelColumnHide') }}
                                </sw-context-menu-item>
                                {% endblock %}
                            </sw-context-button>
                            {% endblock %}

                            {% block sw_data_grid_sort_indicator %}
                            <span
                                v-if="column.sortable && currentSortBy === column.dataIndex"
                                class="sw-data-grid__sort-indicator"
                            >
                                {% block sw_data_grid_sort_indicator_transition %}
                                <transition
                                    name="sort-indicator"
                                    mode="out-in"
                                >
                                    {% block sw_data_grid_sort_indicator_icon_asc %}
                                    <mt-icon
                                        v-if="currentSortDirection === 'ASC'"
                                        key="ASC"
                                        name="regular-chevron-up-xxs"
                                        size="16px"
                                    />
                                    {% endblock %}

                                    {% block sw_data_grid_sort_indicator_icon_desc %}
                                    <mt-icon
                                        v-else
                                        key="DESC"
                                        name="regular-chevron-down-xxs"
                                        size="16px"
                                    />
                                    {% endblock %}
                                </transition>
                                {% endblock %}
                            </span>
                            {% endblock %}
                        </div>
                        {% endblock %}

                        {% block sw_data_grid_header_columns_resize %}
                        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
                        <span
                            v-if="column.allowResize"
                            class="sw-data-grid__cell-resize"
                            @mousedown="onStartResize($event, column, columnIndex)"
                        ></span>
                        {% endblock %}
                    </th>
                    {% endblock %}

                    {% block sw_data_grid_header_cell_spacer %}
                    <th
                        v-if="hasResizeColumns"
                        aria-hidden="true"
                        class="sw-data-grid__cell sw-data-grid__cell--header sw-data-grid__cell-spacer"
                    >
                        <div class="sw-data-grid__cell-content"></div>
                    </th>
                    {% endblock %}

                    {% block sw_data_grid_header_cell_actions %}
                    <th
                        v-if="showActions"
                        class="sw-data-grid__cell sw-data-grid__cell--header sw-data-grid__cell--actions sw-data-grid__cell-settings"
                        :class="{ 'is--loading': loading }"
                    >
                        {% block sw_data_grid_header_cell_actions_content %}
                        <div class="sw-data-grid__cell-content">
                            {% block sw_data_grid_settings %}
                            <sw-data-grid-settings
                                v-if="showSettings"
                                :columns="currentColumns"
                                :compact="compact"
                                :previews="previews"
                                :enable-previews="hasPreviewSlots"
                                :disabled="isInlineEditActive"
                                @change-compact-mode="onChangeCompactMode"
                                @change-preview-images="onChangePreviews"
                                @change-column-visibility="onChangeColumnVisibility"
                                @change-column-order="onChangeColumnOrder"
                            >
                                {% block sw_data_grid_settings_additional_settings %}
                                <template #additionalSettings>
                                    {% block sw_data_grid_settings_additional_settings_inner %}
                                    <slot name="additionalSettings"></slot>
                                    {% endblock %}
                                </template>
                                {% endblock %}
                            </sw-data-grid-settings>

                            {% block sw_data_grid_settings_custom_settings %}
                            <slot name="customSettings">
                                {% block sw_data_grid_settings_custom_settings_slot %}{% endblock %}
                            </slot>
                            {% endblock %}
                            {% endblock %}
                        </div>
                        {% endblock %}
                    </th>
                    {% endblock %}
                </tr>
                {% endblock %}
            </thead>
            {% endblock %}

            {% block sw_data_grid_body %}
            <tbody
                v-if="!loading"
                class="sw-data-grid__body"
            >

                {% block sw_data_grid_body_row %}
                <tr
                    v-for="(item, itemIndex) in records"
                    :key="item.id"
                    class="sw-data-grid__row"
                    :class="getRowClasses(item, itemIndex)"
                >

                    {% block sw_data_grid_body_cell_selection %}
                    <td
                        v-if="showSelection"
                        class="sw-data-grid__cell sw-data-grid__cell--selection"
                    >
                        <slot
                            name="selection-content"
                            v-bind="{ item, isSelected, isRecordSelectable, selectItem, itemIdentifierProperty }"
                        >
                            {% block sw_data_grid_body_cell_selection_content %}
                            <div class="sw-data-grid__cell-content">
                                {% block sw_data_grid_select_item_checkbox %}

                                <mt-checkbox
                                    :aria-label="$tc('global.sw-data-grid.labelSelected')"
                                    :disabled="!isRecordSelectable(item)"
                                    :checked="isSelected(item[itemIdentifierProperty])"
                                    @update:checked="selectItem($event, item)"
                                />
                                {% endblock %}
                            </div>
                            {% endblock %}
                        </slot>
                    </td>
                    {% endblock %}

                    {% block sw_data_grid_body_columns %}
                    <td
                        v-for="(column, columnIndex) in currentVisibleColumns"
                        :key="`${item.id}-${columnIndex}`"
                        class="sw-data-grid__cell"
                        :class="getCellClasses(column)"
                        role="gridcell"
                        @dblclick="onDbClickCell(item)"
                    >
                        <sw-provide :aria-label="column.label">

                            {% block sw_data_grid_body_columns_content %}
                            <div class="sw-data-grid__cell-content">

                                {% block sw_data_grid_preview_slot %}
                                <slot
                                    v-if="previews && !isInlineEdit(item)"
                                    :name="`preview-${column.property}`"
                                    v-bind="{ item, column, compact }"
                                ></slot>
                                {% endblock %}

                                {% block sw_data_grid_columns_slot %}
                                <slot
                                    :name="`column-${column.property}`"
                                    v-bind="{ item, itemIndex, column, columnIndex, compact, isInlineEdit: (isInlineEdit(item) && column.hasOwnProperty('inlineEdit')), selectItem }"
                                >
                                    <template v-if="column.inlineEdit === 'boolean'">
                                        {% block sw_data_grid_columns_boolean %}
                                        <sw-data-grid-column-boolean
                                            v-model:value="item[column.property]"
                                            :is-inline-edit="isInlineEdit(item) && column.hasOwnProperty('inlineEdit')"
                                        />
                                        {% endblock %}
                                    </template>
                                    <template v-else>
                                        {% block sw_data_grid_columns_inline_edit %}
                                        <template v-if="isInlineEdit(item) && column.hasOwnProperty('inlineEdit')">
                                            {% block sw_data_grid_columns_render_inline_edit %}
                                            <sw-data-grid-inline-edit
                                                v-model:value="item[column.property]"
                                                :column="column"
                                                :compact="compact"
                                            />
                                            {% endblock %}
                                        </template>
                                        {% endblock %}

                                        {% block sw_data_grid_columns_value %}
                                        <template v-else>
                                            {% block sw_data_grid_columns_render_router_link %}
                                            <router-link
                                                v-if="column.routerLink"
                                                class="sw-data-grid__cell-value"
                                                :to="{ name: column.routerLink, params: { id: item.id } }"
                                            >
                                                {{ renderColumn(item, column) }}
                                            </router-link>
                                            {% endblock %}
                                            {% block sw_data_grid_columns_render_value %}
                                            <span
                                                v-else
                                                class="sw-data-grid__cell-value"
                                            >
                                                {{ renderColumn(item, column) }}
                                            </span>
                                            {% endblock %}
                                        </template>
                                        {% endblock %}
                                    </template>
                                </slot>
                                {% endblock %}
                            </div>
                            {% endblock %}
                        </sw-provide>
                    </td>
                    {% endblock %}

                    {% block sw_data_grid_body_cell_spacer %}
                    <td
                        v-if="hasResizeColumns"
                        aria-hidden="true"
                        class="sw-data-grid__cell sw-data-grid__cell-spacer"
                        @dblclick="onDbClickCell(item)"
                    >
                        <div class="sw-data-grid__cell-content"></div>
                    </td>
                    {% endblock %}

                    {% block sw_data_grid_body_cell_actions %}
                    <td
                        v-if="showActions"
                        class="sw-data-grid__cell sw-data-grid__cell--actions"
                    >
                        {% block sw_data_grid_body_cell_actions_content %}
                        <div class="sw-data-grid__cell-content">

                            {% block sw_data_grid_inline_edit_actions %}
                            <template v-if="isInlineEditActive && currentInlineEditId === item[itemIdentifierProperty]">

                                {% block sw_data_grid_inline_edit_actions_cancel %}
                                <mt-button
                                    class="sw-data-grid__inline-edit-cancel"
                                    size="x-small"
                                    :title="$tc('global.default.cancel')"
                                    :aria-label="$tc('global.default.cancel')"
                                    square
                                    variant="secondary"
                                    @click="onClickCancelInlineEdit(item)"
                                >
                                    {% block sw_data_grid_inline_edit_actions_cancel_icon %}
                                    <mt-icon name="regular-times-xs" />
                                    {% endblock %}
                                </mt-button>
                                {% endblock %}

                                {% block sw_data_grid_inline_edit_actions_save %}
                                <mt-button
                                    class="sw-data-grid__inline-edit-save"
                                    variant="primary"
                                    size="x-small"
                                    :title="$tc('global.default.save')"
                                    :aria-label="$tc('global.default.save')"
                                    square
                                    @click="onClickSaveInlineEdit(item)"
                                >
                                    {% block sw_data_grid_inline_edit_actions_save_icon %}
                                    <mt-icon
                                        name="regular-checkmark-xxs"
                                    />
                                    {% endblock %}
                                </mt-button>
                                {% endblock %}
                            </template>
                            {% endblock %}

                            {% block sw_data_grid_body_cell_actions_menu %}
                            <sw-context-button
                                v-else
                                :menu-width="contextButtonMenuWidth"
                                class="sw-data-grid__actions-menu"
                                aria-label="global.sw-data-grid.actionsMenu"
                            >
                                <slot
                                    name="actions"
                                    :item="item"
                                    :item-index="itemIndex"
                                >
                                    {% block sw_data_grid_slot_actions %}{% endblock %}
                                </slot>
                            </sw-context-button>
                            {% endblock %}

                            {% block sw_data_grid_body_cell_action_modals %}
                            <slot
                                name="action-modals"
                                :item="item"
                            >
                                {% block sw_data_grid_slot_action_modals %}{% endblock %}
                            </slot>
                            {% endblock %}
                        </div>
                        {% endblock %}
                    </td>
                    {% endblock %}
                </tr>
                {% endblock %}
            </tbody>
            {% endblock %}

            {% block sw_data_grid_skeleton %}
            <sw-data-grid-skeleton
                v-else
                :show-selection="showSelection"
                :show-actions="showActions"
                :current-columns="currentColumns"
                :has-resize-columns="hasResizeColumns"
                :item-amount="skeletonItemAmount"
                class="sw-data-grid__body"
            />
            {% endblock %}
        </table>
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_data_grid_pagination %}
    <div class="sw-data-grid__pagination">
        {% block sw_data_grid_pagination_inner %}
        <slot name="pagination">
            {% block sw_data_grid_slot_pagination %}{% endblock %}
        </slot>
        {% endblock %}
    </div>
    {% endblock %}
</div>
{% endblock %}
